<template>
  <div class="common-search-form-component">
    <a-form :model="modelValue">
      <a-row :gutter="16">
        <a-col 
          v-for="(item, index) in formItems" 
          :key="index"
          :xs="item.span?.xs || 24" 
          :sm="item.span?.sm || 12" 
          :md="item.span?.md || 12" 
          :lg="item.span?.lg || 6" 
          :xl="item.span?.xl || 6"
        >
          <a-form-item :label="item.label">
            <!-- 输入框 -->
            <a-input
              v-if="item.type === SearchItemType.INPUT"
              v-model:value="modelValue[item.field]"
              :placeholder="typeof item.placeholder === 'string' ? item.placeholder : undefined"
              :allow-clear="item.allowClear !== false"
              @keyup.enter="handleSearch"
            />
            
            <!-- 选择框 -->
            <a-select
              v-else-if="item.type === SearchItemType.SELECT"
              v-model:value="modelValue[item.field]"
              :placeholder="item.placeholder"
              :allow-clear="item.allowClear !== false"
              :style="{ width: '100%' }"
            >
              <a-select-option 
                v-for="option in item.options" 
                :key="option.value" 
                :value="option.value"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>
            
            <!-- 树选择 -->
            <a-tree-select
              v-else-if="item.type === SearchItemType.TREE_SELECT"
              v-model:value="modelValue[item.field]"
              :tree-data="item.treeData"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :field-names="item.fieldNames || { label: 'name', value: 'id', children: 'children' }"
              :placeholder="item.placeholder"
              :allow-clear="item.allowClear !== false"
              :tree-default-expand-all="item.treeDefaultExpandAll !== false"
              :style="{ width: '100%' }"
            />
            
            <!-- 日期范围选择器 -->
            <a-range-picker
              v-else-if="item.type === SearchItemType.RANGE_PICKER"
              :value="dateRange"
              :placeholder="Array.isArray(item.placeholder) ? item.placeholder : [
                $t('common.startDate'), 
                $t('common.endDate')
              ]"
              :style="{ width: '100%' }"
              @change="handleDateRangeChange"
            />
            
            <!-- 日期选择器 -->
            <a-date-picker
              v-else-if="item.type === SearchItemType.DATE_PICKER"
              v-model:value="modelValue[item.field]"
              :placeholder="typeof item.placeholder === 'string' ? item.placeholder : undefined"
              :style="{ width: '100%' }"
            />
            
            <!-- 数值输入框 -->
            <a-input-number
              v-else-if="item.type === SearchItemType.INPUT_NUMBER"
              v-model:value="modelValue[item.field]"
              :placeholder="typeof item.placeholder === 'string' ? item.placeholder : undefined"
              :min="item.min"
              :max="item.max"
              :step="item.step"
              :style="{ width: '100%' }"
            />
            
            <!-- 自定义插槽 -->
            <slot 
              v-else-if="item.type === SearchItemType.SLOT" 
              :name="item.slotName || item.field"
              :field="item.field"
              :model="modelValue"
            ></slot>
            
            <!-- 默认显示输入框 -->
            <a-input
              v-else
              v-model:value="modelValue[item.field]"
              :placeholder="typeof item.placeholder === 'string' ? item.placeholder : undefined"
              :allow-clear="item.allowClear !== false"
              @keyup.enter="handleSearch"
            />
          </a-form-item>
        </a-col>
      </a-row>
      
      <!-- 操作按钮区域 -->
      <div v-if="showButtons" class="form-actions">
        <a-button type="primary" @click="handleSearch">
          <template #icon><SearchOutlined /></template>
          {{ $t('common.search') }}
        </a-button>
        <a-button @click="handleReset">
          <template #icon><ReloadOutlined /></template>
          {{ $t('common.reset') }}
        </a-button>
        <slot name="actions"></slot>
      </div>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { SearchItemType, type SearchItemConfig } from '@/types/component/search'

defineOptions({
  name: 'BaseSearch'
})

// Props定义
const props = withDefaults(defineProps<{
  modelValue: Record<string, any>
  formItems: SearchItemConfig[]
  dateRange?: any
  showButtons?: boolean
}>(), {
  modelValue: () => ({}),
  dateRange: undefined,
  showButtons: true
})

// Emits定义
const emit = defineEmits([
  'update:modelValue',
  'update:dateRange',
  'search',
  'reset',
  'date-change'
])

// 处理搜索
const handleSearch = () => {
  emit('search')
}

// 处理重置
const handleReset = () => {
  // 重置所有字段
  const resetValue = { ...props.modelValue }
  Object.keys(resetValue).forEach(key => {
    resetValue[key] = undefined
  })
  
  // 更新表单值
  emit('update:modelValue', resetValue)
  
  // 重置日期范围
  emit('update:dateRange', undefined)
  
  // 触发重置事件
  emit('reset')
}

// 处理日期范围变更
const handleDateRangeChange = (dates: any) => {
  emit('update:dateRange', dates)
  emit('date-change', dates)
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 8px;
}
</style> 